<template>
	<div
		v-if="project"
		class="course-design"
	>
		<!-- 项目信息 -->
		<BasicInfo
			:project="project"
			@updateProject="project=$event"
		/>
		<!-- 主要信息 -->
		<ImportInfo
			:project="project"
			@updateProject="project=$event"
		/>
		<!-- 附件信息 -->
		<Files :project="project" />
		<!-- 评论 -->
		<Comments :project="project" />
		<!-- 购买记录 -->
		<Purchased  :project="project" />
	</div>
</template>

<script>
import { getCourseDesign } from '@project/api/course'
import { PROJECT_TYPE } from '@/constants/staticData'
import BasicInfo from './components/BasicInfo'
import ImportInfo from './components/ImportInfo'
import Files from './components/Files'
import Comments from './components/Comments'
import Purchased from './components/Purchased'
export default {
  route: {
    name: 'CourseDesignDetail',
    meta: {
      login: true,
      showLeft: true,
      activeName: 'CourseDesign',
    }
  },
  components: {
    BasicInfo,
    ImportInfo,
    Files,
    Comments,
    Purchased
  },
  data() {
    return {
      project: null,
    }
  },
  created() {
    this.loadCourseDesign()
  },
  methods: {
    async loadCourseDesign() {
      this.$loading()
      try {
        const res = await getCourseDesign(this.$route.query.id)

        this.project = res.data
        /* tags划分 */
        this.project.tags = this.project.tags.split(' ')
        /* 发布时间格式化 */
        this.project.createTime = moment(this.project.createTime).format('YYYY-MM-DD HH:mm')
        /* 获取课程类型 */
        this.project.courseType = PROJECT_TYPE.find(item => item.value === this.project.courseType)

        console.log(this.project)
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
  }
}
</script>
<style lang="scss">
.course-design {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  min-width: 1000px;
  padding: 20px;

  .el-form {
    padding: 10px;
    background-color: rgba(64, 158, 255, 0.04);
    border-radius: $radiusMiddle;
    box-shadow: $shadow1;

    h2 {
      margin-bottom: 10px;
    }

    ol {
      margin-left: 15px;
    }

    .el-image {
      cursor: pointer;
      border-radius: 4px;
    }
  }
}
</style>

